<template>
  <body>
    <div class="box">
      <h1 class="title">登录</h1>
      <h6 class="subtitle is-6">需要登录才可以访问受限制页面</h6>

      <b-field label="Email" :label-position="labelPosition">
        <b-input type="email" v-model="email" maxlength="30"> </b-input>
      </b-field>
      
      <b-field label="Password" :label-position="labelPosition">
        <b-input type="password" v-model="pass" password-reveal> </b-input>
      </b-field>
      <vue-recaptcha :sitekey="sitekey" @verify="onVerify"></vue-recaptcha>
      <!-- <b-button type="is-primary" tag="router-link" :to="{ path: '/node' }" expanded>跳转</b-button> -->
      <b-button type="is-primary" @click="login" expanded>登录</b-button>
      <div id="register">
        没有账号？
        <router-link to="/register">创建一个!</router-link>
      </div>
    </div>
  </body>
</template>

<script>
import VueRecaptcha from "vue-recaptcha";
import { sitekey } from "../config.json";

export default {
  name: "Home",
  components: { VueRecaptcha },
  data() {
    return {
      // active: false,
      // triggers: ["hover"],
      // pagenum: null,
      email: "",
      pass: "",
      labelPosition: "on-border",
      VerRes: "",
      sitekey: sitekey,
    };
  },
  methods: {
    onVerify: function (response) {
      this.VerRes = response;
      console.log("Verify: " + response);
    },
    async login() {
      if (this.email == "") {
        //nothing happens here
      }
      if (this.VerRes == "") {
        //return
        // this.$buefy.dialog.alert("你还没有点验证码！");
      }
      let res = await this.$http.post("/go/login/auth", {
        email: this.email,
        password: this.pass,
      });
      if (res.status != 401 && res.data.access_token != null) {
        await localStorage.setItem("email", this.email);
        await localStorage.setItem("token", res.data.access_token);
      }
      //console.log(await localStorage.getItem("email"));
      this.$router.push("/forum");
    },
  },
};
</script>

<style scoped>
body {
  background: url("../assets/hosikumo-3.svg");
  background-size: cover;
  display: flex;
  min-height: 100%;
  align-items: center;
  overflow: hidden;
}

.box {
  width: 400px;
  margin: auto;
  text-align: center;
  background-color: #ffffffd0;
}

#register {
  margin: 5px auto;
}

</style>
